<!doctype html>
<html lang="en">
{% load static %}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>城市智能交通分析系统</title>
    <!-- css样式 -->
    <link type="text/css" rel="stylesheet" href="../static/bootstrap/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="../static/css/sideBar.css">
    <link type="text/css" rel="stylesheet" href="../static/font-awesome/css/font-awesome.css" />
    <link type="text/css" rel="stylesheet" href="../static/css/openlayers-routing-machine.css" />
    <link href="../static/css/ol.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://unpkg.com/openlayers/dist/ol.css" />
    <link rel="stylesheet" href="../static/css/openlayers-routing-machine.css" />
    <!-- js样式 -->
    <script type="text/javascript" src="{%static 'js/jquery-3.4.1.js'%}"></script>
    <script type="text/javascript" src="{%static 'bootstrap/js/bootstrap.js'%}"></script>
    <script type="text/javascript" src="{%static 'js/route.js'%}"></script>
</head>

<body class>
    <div class="container-fluid">
        <div class="row">
            <!-- 侧边栏 -->
            <div class="sidebar" style="background:#cfebf1">
				<h4 style="background:#8cb9c4; color: black; text-align: center; font-size:x-large;font-family:华文彩云">驾驶辅助决策系统</h4>
				<div class="cover" style="background:#68cae2; color:rgb(255, 255, 255)">
					<h2><img class="img-circle" src="../static/img/car.png" /></h2>
					<b style="color: black;">Hi~ 小主</b>
				</div>
				<ul class="sidenav animated fadeInUp">
					<!-- 一级标题 -->
					<li>
						<a class="withripple hover" href="javascript:;" style="background:#68cae2;  color:black ">
							<i class="fa  fa-user-circle" aria-hidden="true"></i>
							<span class="sidespan">司机辅助系统</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown" >
							<li>
								<a id='route_plan' class="withripple" style="background:#68cae2;  color:black ">路径规划
								</a>
							</li>
						</ul>
					</li>
					<!-- 二级标题 -->
					<li>
						<a class="withripple" href="javascript:;" style="background:#afd9e4;  color:black ">
							<i class="fa fa-taxi" aria-hidden="true"></i>
							<span class="sidespan">区域综合分析</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="hotpot_zone_analysis" class="withripple" style="background:#afd9e4; color:black">热点区域分析
								</a>
							</li>
							<li>
								<a id="network_module" class="withripple" style="background:#afd9e4;  color:black ">网络社区模块
								</a>
							</li>
						</ul>
					</li>
					<!-- 三级标题 -->
					<li>
						<a class="withripple hover" href="javascript:;" style="background:#68cae2;  color:black ">
							<i class="fa  fa-rocket" aria-hidden="true"></i>
							<span class="sidespan">城市辅助决策</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="city_plan_analysis" class="withripple" style="background:#68cae2;  color:black ">上下车点周围查询
								</a>
							</li>
							<li>
								<a id="traffic_jam" class="withripple" style="background:#68cae2;  color:black ">拥堵路段分析
								</a>
							</li>
						</ul>
					</li>
					<!-- 四级标题 -->
					<li>
						<a class="withripple" href="javascript:;" style="background:#afd9e4;  color:black ">
							<i class="fa fa-truck" aria-hidden="true"></i>
							<span class="sidespan">司机情况概览</span>
							<i class="iright pull-right">&gt;</i>
						</a>
						<ul class="sidebar-dropdown">
							<li>
								<a id="track_recall" class="withripple" style="background:#afd9e4;  color:black ">危险驾驶行为回溯</a>
							</li>
							<li>
								<a id="driving_feature" class="withripple" style="background:#afd9e4;  color:black ">司机驾驶业绩</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
            <!-- 主体部分  -->
            <div class="main">
                <!-- 上方标题 -->
                <div class="main-title">
                    <!-- 左侧下拉框 -->
                    <ul class="nav navbar-nav navbar-left navbar-side">
                        <li>
                            <a href="">
                                <i class="fa fa-sliders" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                    <!-- 右侧下拉框 -->
                    <ul class="nav-right navbar-nav navbar-left navbar-side-right">
                        <li>
                            <a href="">
                                <i class="fa fa-bar-chart" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 右侧参数设置 -->
                <div class="sidebarright" style="background:#cfebf1">
                    <h4 style="text-align: center; background: #5ec4dd;" >参数设置</h4>
                    <select class="selectpicker btn-danger btn-group btn-group-justified" id="selectpoi">
                        <optgroup label="城市POI类型" id="optgrouppoi">
                            <option>--所有--</option>
                        </optgroup>
                    </select>
                    <br />
                    <button type="button" class="btn btn-primary btn-group btn-group-justified"
                        onclick="ShowUniquePOI();">查询特定类型的城市POI</button>
                    <br />
                    <button type="button" class="btn btn-warning btn-group btn-group-justified"
                        onclick="ClearPOI();">清除POI图层</button>
                    <br />
                    <button type="button" class="btn btn-success btn-group btn-group-justified"
                        onclick="FirstXY();">点击第一个坐标点</button>
                    <p class="text-left" style="color: white" id="xyfirst">first：</p>
                    <button type="button" class="btn btn-success btn-group btn-group-justified"
                        onclick="SecondXY();">点击第二个坐标点</button>
                    <p class="text-left" style="color: white" id="xysecond">second：</p>
                    <button type="button" class="btn btn-info btn-group btn-group-justified"
                        onclick="ClearBind();">清除点击绑定</button>
                    <br />
                    <button type="button" class="btn btn-info btn-group btn-group-justified"
                        onclick="RouteQuery();">开启路径查询</button>
                    <br />

                </div>
                <!-- 右侧框架 -->
                <div id="right_frame" style="background:#000080; color:#FFF">
                    <div id="map" style="width: 100%;height: 1000px;overflow: hidden;"></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="{%static 'js/sideBar.js'%}"></script>
    <script src="{%static 'js/ol-debug.js'%}"></script>
    <script src="{%static 'js/openlayers-routing-machine.js'%}"></script>
</body>
<script type="text/javascript">
    var localhost = '172.16.5.236'
    $("#route_plan").attr("href", "http://" + localhost + ":8000/web/route/");
    $("#hotpot_zone_analysis").attr("href", "http://" + localhost + ":8000/web/hotpot/")
    $("#network_module").attr("href", "http://" + localhost + ":8000/web/network/")
    $("#city_plan_analysis").attr("href", "http://" + localhost + ":8000/web/cityplan/")
    $("#traffic_jam").attr("href", "http://" + localhost + ":8000/web/traffic/")
    $("#track_recall").attr("href", "http://" + localhost + ":8000/web/trackrecall")
    $("#driving_feature").attr("href", "http://" + localhost + ":8000/web/drivingfeature/")
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        target: 'map',
        view: new ol.View({
            center: ol.proj.fromLonLat([114.3, 30.5]),
            zoom: 12
        })
    });
</script>

</html>